<template>
  <div class="add-address">
    <m-form
      ref="form"
      :model="formData"
      label-width="130px"
      label-position="right"
      :rules="rules"
    >
      <m-form-item prop="real_name" label="收货人姓名：">
        <div class="input-wrap">
          <m-input v-model="formData.real_name" style="width: 100%; display: inline-block" />
        </div>
      </m-form-item>

      <m-form-item prop="company" label="公司：">
        <div class="input-wrap">
          <m-input
            v-model="formData.company"
            style="width: 100%; display: inline-block"
          />
        </div>
      </m-form-item>

      <m-form-item prop="province" label="目的地：">
        <div class="input-wrap">
          <v-distpicker
            class="addressChoose"
            @province="onChangeProvince"
            @city="onChangeCity"
            @area="onChangeArea"
            :province="formData.province"
            :city="formData.city"
            :area="formData.district"
          ></v-distpicker>
        </div>
      </m-form-item>

      <m-form-item prop="detail" label="详细地址：">
        <div class="input-wrap">
          <m-input
            v-model="formData.detail"
            style="width: 100%; display: inline-block"
          />
        </div>
      </m-form-item>

      <m-form-item prop="phone" label="手机号：">
        <div class="input-wrap">
          <m-input
            v-model="formData.phone"
            maxLength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
            style="width: 100%; display: inline-block"
          />
        </div>
      </m-form-item>

      <m-form-item prop="tel" label="电话：">
        <div class="input-wrap">
          <m-input
            v-model="formData.tel"
            oninput="value=value.replace(/[^\d]/g,'')"
            style="width: 100%; display: inline-block"
          />
        </div>
      </m-form-item>

      <m-form-item label="">
        <m-checkbox v-model="formData.is_default">设为默认</m-checkbox>
      </m-form-item>

      <m-form-item>
        <div style="width: 435px; display: flex; justify-content: center">
          <m-button width="190" @click="add">添加</m-button>
        </div>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton"
import MInput from "@/components/common/m-input/MInput"
import MSelect from "@/components/common/m-select/MSelect"
import MRadio from "@/components/common/m-radio/MRadio"
import MCheckbox from "@/components/common/m-checkbox/MCheckbox"
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import { addEditAddress, detailAddress } from "@/request/api"

export default {
  name: "AddAddress",
  components: { MCheckbox, MRadio, MSelect, MInput, MButton, MForm, MFormItem },
  data() {
    return {
      id: "",
      type: "add",
      formData: {
        province: "北京市",
        city: "北京市",
        district: "东城区"
      },
      rules: {
        real_name: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
        company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        receiver: [{ required: true, message: "请输入收货人姓名", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }],
        country: [{ required: true, message: "请选择国家", trigger: "change" }],
        province: [{ required: true, message: "请选择省份", trigger: "change" }],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        address: [{ required: true, message: "请输入详细地址", trigger: "change" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "change" }]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.type = "edit"
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      detailAddress(this.id).then(res => {
          res.data.is_default = Boolean(res.data.is_default)
          this.formData = res.data
        }).catch(err => {
          this.$message.error(err.message)
        })
    },
    // 选择省市区
    onChangeProvince(e) {
      this.formData.province = e.value
    },
    onChangeCity(e) {
      this.formData.city = e.value
    },
    onChangeArea(e) {
      this.formData.district = e.value
    },
    add() {
      let that = this
      this.$refs.form.$refs.mForm.validate(res => {
        if (res) {
          that.$toastVant.loading("请稍后...")
          addEditAddress(that.formData).then(() => {
            setTimeout(function() {
              if (that.type == "add") {
                that.$toastVant.success("添加成功!")
              } else {
                that.$toastVant.success("更新成功!")
              }
              that.$router.go(-1)
            }, 500)
          }).catch(err => {
            that.$message.error(err.message)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .distpicker-address-wrapper label {
  display: block;
  width: 32%;
}
/deep/.distpicker-address-wrapper select {
  width: 100%;
  height: 45px;
  background-color: #f3f4f8;
  border: solid 1px #e9e9e9;
  border-radius: 10px;
  position: relative;
}
.add-address {
  padding-top: 30px;
  padding-bottom: 400px;

  .input-wrap {
    width: 435px;
    display: flex;
    justify-content: space-between;
    .addressChoose {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
